<template>
	<view class="container">
		<uni-nav-bar fixed="true" statusBar="true" border="false" :left-icon="isShareEntry ? 'home' : 'left'" title="用户信息" @clickLeft="handleClickLeft"></uni-nav-bar>
		<!-- <view class="my-header b-dash">
			<view class="circle-one"></view>
			<view class="cus-nav-left" @tap="navgetTo('pages/schdule/schdule_team')">
				<uni-icons type="back" size="20" color="#000"></uni-icons>
			</view>
			<view class="cus-nav-bar" :style="{'padding-top':navTop+'px'}">
				<view class="cus-nav-title">
					用户信息
				</view>
			</view>
			<view class="avatar">
				<view class="avatar-left">
					<text>{{Data.nickName}}</text>
				</view>
				<view class="avatar-right">
					<image :src="Data.headerPic"></image>
				</view>
			</view>
			<view class="is-flex">
				<view class="">
					<text>创建行程&nbsp;&nbsp;&nbsp;&nbsp;{{Data.createItinerary}}个</text>
					<text>{{Data.sex}}</text>
				</view>
				<view class="">
					<text>参加行程&nbsp;&nbsp;&nbsp;&nbsp;{{Data.joinItinerary}}次</text>
					<text>{{Data.age}}</text>
				</view>
			</view>
		</view> -->
		<view class="uni-padding-wrap bor_d bg-white uni-flex boxsiz ac">
			<view class="avatar">
				<image mode="aspectFill" :src="Data.headerPic || '/static/my.png'"></image>
			</view>
			<view class="flex1 mb15">
				<view class="font_size_36 b-font mb40">{{Data.nickName || '一颗大白菜'}}</view>
				<view class="uni-flex">
					<text class="mr20 gender">年龄</text><text class="mr50">{{Data.age || 25}}<text class="gender-icon color-blue b-font" v-if="Data.sex === 0">♂</text>
					<text class="gender-icon color-red b-font" v-if="Data.sex === 1">♀</text></text>	
				</view>
				<view class="mb30 mr50">
					<text class="mr20">组队</text><text>{{userInfo.createItinerary}}次</text>
				</view>
				<view class="mb30">
					<text class="mr20">报名</text><text>{{userInfo.joinItinerary}}次</text>
				</view>
			</view>
			<view class="uni-flex boxsiz">
				<view class="mr40">签名</view>
				<view class="flex1">{{userInfo.signature || '这是签名这是签名这是签名这是签名这是签名这是签名 签名这是签名这是签名这是签名这是签名这是签名这是签名这是签名这是签名这是签名'}}</view>
			</view>
		</view>
		<view class="bor_d tab">
			<text :class="navIndex==0?'mr100 active':'mr100'" @click="checkIndex(0)">照片墙</text><text :class="navIndex==1?'active':''" @click="checkIndex(1)">报名信息</text>
		</view>
		<view class="content" v-if="navIndex==0">
			<view class="mt100 tc" v-if="withdrawalAccounts.length == 0">
				<view class="wd100">暂无数据！</view>
			</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="uni-padding-wrap">
				<view class="mt30">
					<view>订单信息</view>
					<view><text class="mr50">--订单渠道</text><text>{{OrderInfo.orderChannel}}</text></view>
					<view><text class="mr50">--推广编码</text><text>{{OrderInfo.inviteMemberNumber}}</text></view>
					<view><text class="mr50">--订单状态</text>
					<text v-if="OrderInfo.orderStatus == 1">待支付</text>
					<text v-if="OrderInfo.orderStatus == 2">支付中</text>
					<text v-if="OrderInfo.orderStatus == 3">支付成功</text>
					<text v-if="OrderInfo.orderStatus == 4">已完结</text>
					<text v-if="OrderInfo.orderStatus == 9">退款中</text>
					<text v-if="OrderInfo.orderStatus == -1">已取消</text>
					</view>
					<view class="mb45"><text class="mr50">--订单金额</text><text>￥{{OrderInfo.orderAmount}}</text></view>
				</view>
				<view class="mt30">
					<view>队员信息</view>
					<view><text class="mr50">--队员名称</text><text>{{OrderInfo.nickName}}</text></view>
					<view class="mb45"><text class="mr50">--队员电话</text><text>{{OrderInfo.mobile}}</text></view>
				</view>
				<view class="mt30">
					<view>支付信息</view>
					<view><text class="mr50">--支付渠道</text><text>{{OrderInfo.orderPayChannel}}</text></view>
					<view><text class="mr50">--支付时间</text><text>{{OrderInfo.payDate}}</text></view>
					<view class="mb100"><text class="mr50">--支付流水号</text><text>{{OrderInfo.thirdFlowNo}}</text></view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import storageUtil from '../../common/util/storageUtil';
	import api from '@/common/api/webapi.js'; /*api*/
	export default {
		components: {
			
		},
		data() {
			return {
				navTop: 40,
				mobile: '15398573809',
				userLoginFlag: false,
				navIndex:0,
				orderNo:'',
				Data: {},
				OrderInfo:{},
				linesList:[],
				isShareEntry: false,
			}
		},
		onLoad(option) {
			const app = getApp()
			this.navTop = app.globalData.navTop;
			if(option.param){
				let params = JSON.parse(decodeURIComponent(option.param));
				this.Data = params.data.userDetailDto;
			}
			// 判断是否从分享进入
			if (option.InternanyId || option.LeaderUserId || option.memberAccount) {
				this.isShareEntry = true;
			}
		},
		methods: {
			// 页面跳转
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			checkIndex(index) {
				this.navIndex = index;
				if(index == 0){
					
				}else if(index == 1){
					this.getOrderInfo();
				}
			},
			GetDetailInfo(params) {
				let _this = this;
				api.leaderItineraryMemberDetail({
					params: {
						userId: _this.Data.userId,
						travelItineraryId:_this.Data.travelItineraryId,
					}
				}).then(res => {
					if (res.code === 0) {
						_this.Data = Object.assign(_this.Data,res.data);
					} else {}
				}).catch()
			},
			getOrderInfo() {
				let _this = this;
				api.leaderItineraryMemberDetail({
					params: {
						orderNo : _this.Data.travelItineraryId,
					}
				}).then(res => {
					if (res.code === 0) {
						_this.OrderInfo = res.data;
					} else {}
				}).catch()
			},
			getMemberLines(params){
				let _this = this;
				api.leaderItineraryMemberDetail({
					params: {
						userId: params,
					}
				}).then(res => {
					if (res.code === 0) {
						if(res.data.length>0){
							_this.linesList = res.data;
						}
					} else {}
				}).catch()
			},
			// 处理左侧点击事件
			handleClickLeft() {
				if (this.isShareEntry) {
					this.goHome();
				} else {
					this.back();
				}
			},
			// 返回上一页
			back() {
				uni.navigateBack();
			},
			// 跳转到首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
			background-color: #f8f8f8;
			padding-top: 100rpx; /* 为导航栏留出空间 */
		}
	.my-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		background-color: #fff;
		height: 600rpx;
	}

	.circle-one {
		width: 520rpx;
		height: 520rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right bottom, #eff5e3 60%, #eff5e3 80%);
		position: absolute;
		top: -100rpx;
		left: -90rpx;
	}

	.is-flex {
		display: flex;
	}

	.cus-nav-bar {
		position: sticky;
		top: 0;
		flex-direction: row;
		height: calc(44px + env(safe-area-inset-top));
		line-height: calc(44px + env(safe-area-inset-top));
		padding: 15rpx 20rpx;
		color: #000;
		display: flex;

	}

	.cus-nav-title {
		text-align: center;
		flex-grow: 1;
		font-size: 32rpx;
	}

	.avatar {
		display: flex;
		align-items: center;
	}

	.avatar-left {
		position: relative;
		z-index: 99;
		width: 65%;
		text-align: center;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: $uni-text-color-black;

		}
	}
	
	.gender{
		position: relative;
	}

	.gender-icon {
		position: absolute;
		right: -30rpx;
		top: -12rpx;
	}

	.avatar-right {
		width: 35%;
		text-align: right;
		padding-right: 50rpx;

		image {
			width: 278rpx;
			height: 278rpx;
		}
	}
	
	/* 用户信息区域 */
	.avatar {
		width: 278rpx;
		height: 278rpx;
		text-align: right;
		padding-right: 40rpx;
		image {
			width: 278rpx;
			height: 278rpx;
			object-fit: cover;
			border-radius: 50%;
		}
	}

	.my-container-bg {
		height: 100rpx;
		width: 100%;
	}

	.site-card {
		width: 100%;
	}

	.my-container-card {
		background-color: $uni-text-color-white;
		box-shadow: 2rpx 2px 10rpx $uni-text-color-grey8;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.card-left {
		display: flex;
		line-height: 120rpx;
		height: 120rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}

		.font-f-h {
			font-size: 32rpx;
		}
	}

	.card-right {
		line-height: 120rpx;
		height: 120rpx;
	}



	.con-position {
		position: relative;
	}
	.uni-flex {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
</style>